window.onload = function () {
    var container = document.querySelector("#container");
    var canvas = document.createElement("canvas");
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    container.appendChild(canvas);
    var gl = canvas.getContext("webgl");
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    
    function draw(gl,points,scale) {
        var VERTEX_SHADER_SOURCE =
            "attribute vec4 a_Position;\n" +
            "uniform float u_Scale;\n" +
            "void main(){\n" +
            "gl_Position = a_Position * u_Scale ;\n"+
            "}\n";
        var FRAGMENT_SHADER_SOURCE =
            "void main(){\n" +
            "gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n" +
            "}\n";
        var vertex_shader_obj = gl.createShader(gl.VERTEX_SHADER);
        var fragment_shader_obj = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(vertex_shader_obj, VERTEX_SHADER_SOURCE);
        gl.shaderSource(fragment_shader_obj, FRAGMENT_SHADER_SOURCE);
        gl.compileShader(vertex_shader_obj);
        gl.compileShader(fragment_shader_obj);
        var program = gl.createProgram();
        gl.attachShader(program, vertex_shader_obj);
        gl.attachShader(program, fragment_shader_obj);
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw gl.getProgramInfoLog(program);
        };
        gl.useProgram(program);
        // scale
        var u_Scale = gl.getUniformLocation(program, "u_Scale");
        gl.uniform1f(u_Scale, scale);
        // points
        var vertices = new Float32Array(points);
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
        //draw
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
        return scale;
    };
    
    var currentScale = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],1.5);
    var finalScale;
    
    canvas.onwheel = function(e){
        if(e.deltaX >= 0 && e.deltaY == 0){
            var cumulativeScale = 1.0 + currentScale;
            finalScale = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],cumulativeScale);
            currentScale = finalScale;
        }else if (e.deltaX < 0 && e.deltaY == 0){
            var cumulativeScale = -1.0 + currentScale;
            finalScale = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],cumulativeScale);
            currentScale = finalScale;
        }else if (e.deltaX == 0 && e.deltaY >= 0){
            var cumulativeScale = 0.1 + currentScale;
            finalScale = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],cumulativeScale);
            currentScale = finalScale;
        }else if (e.deltaX == 0 && e.deltaY < 0){
            var cumulativeScale = -0.1 + currentScale;
            finalScale = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],cumulativeScale);
            currentScale = finalScale;
        }
    }
}